import React,{useState,useEffect} from 'react'
function Page(){
  const [age,setAge]  = useState(18)
  const [money,setMoney]  = useState(1000)
  // useEffect的第二个参数时时一个数组其中的每一项是依赖项，
  // 如果不传的话默认状态改变就会执行,传空数组的话除了第一次渲染才执行，状态改变是不会执行
  // 传了某一项只有当某一项发生改变时才会执行
  useEffect(()=>{
    console.log('子组件的useEffect执行了')
    // 返回一个函数，在组件销毁的时候执行，用于清除副作用
    return ()=>{
      console.log('子组件卸载了')
    }
  },[age,money])
  return (
    <div>
      <h2>page Component</h2>
      <h3>{age}</h3>
      <h3>￥{money}</h3>
      <button onClick={()=>setAge(age+1)}>长大</button>
      <button onClick={()=>setMoney(money+1000)}>攒钱</button>
    </div>
  )
}
export default function App() {
  useEffect(()=>{
    console.log('父组件的useEffect执行了')
    // 返回一个函数，在组件销毁的时候执行，用于清除副作用
    return ()=>{
      console.log('父组件卸载了')
    }
  },[])
  const [state, setState]  = useState(true) 
  return (
    <div>
      <h1>{state}</h1>
      <button onClick={()=>setState(!state)}>父组件点击</button>
      {state && <Page/>}
    </div>
  )
}
